<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,
			ul,
			li,
			h2 {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			.list>div {
				margin-bottom: 10px;
			}
			.list .show {
				display: block;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="./css/qq.css" />
	</head>

	<body onselectstart="return false;">
		<div class="wrap">
			<div class="list">
				<h2><span></span>我的好友</h2>
				<ul>
					<li>小佳Love</li>
					<li>从来就是这么正经</li>
					<li>leo是个胖子</li>
					<li>momo不是陌陌</li>
				</ul>
				<h2><span></span>企业好友</h2>
				<ul>
					<li>习近平</li>
					<li>普京</li>
					<li>奥巴马</li>
				</ul>
				<h2><span></span>黑名单</h2>
				<ul>
					<li>安倍</li>
					<li>杜特尔特</li>
				</ul>
			</div>
		</div>
		<script>

			// 数据  设计数据结构  [] {}
			

			// 设计一个人的信息数据结构
			// ['黑色','黑色','高','高']
			// 妙味课堂的讲师
			{
				title : 'jiangshi',
				people: [
					{
						name: 'leo',
						toufa: '黑色',
						yanjing: '黑色',
						gezi: '高',
						bizi: '高'
					},
					{
						name: 'momo',
						toufa: '红色',
						yanjing: '黑色',
						gezi: '中等',
						bizi: '高'
					}
				]
			}
			// 妙味课堂的类型
			{
				title :'xueshegn',
				people : [
					{
						name: 'leo',
						toufa: '黑色',
						yanjing: '黑色',
						gezi: '高',
						bizi: '高'
					},
					{
						name: 'momo',
						toufa: '红色',
						yanjing: '黑色',
						gezi: '中等',
						bizi: '高'
					}
				]
			}

		</script>
	</body>

</html>